<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';

import { Button } from 'ant-design-vue';
import dayjs from 'dayjs';

import { getOrderList } from '#/api';
import { BASE_ICON_URL } from '#/config'; // 引入全局配置
import { router } from '#/router';

// 待处理订单列表
interface OrderItem {
  bedType: string;
  breakfastCount: number;
  checkInDate: string;
  checkOutDate: string;
  contactName: string;
  createTime: string;
  hotelId: number;
  nights: number;
  orderNo: string;
  orderStatus: number;
  payStatus: number;
  roomCount: number;
  payAmount: number;
  nameZh: string;
}
const orderList = ref<OrderItem[]>([]);

// 获取待处理订单列表数据
const getList = async () => {
  try {
    const { data } = await getOrderList({
      orderTalStatus: 1,
      pageNo: 1,
      pageSize: 4,
    });
    orderList.value = data.records;
  } catch (error) {
    console.error('获取待确认订单失败：', error);
  }
};

// 跳转订单页面
const goOrderDetail = () => {
  // TODO: 跳转订单页面
  router.push({ path: '/order/order-list' });
};
// 按钮loading动画
// const butLoading = ref(false);
// const cancelLoading = ref(false);

// // 接受订单
// const handleAccept = async (orderNo: string) => {
//   butLoading.value = true;
//   try {
//     await acceptOrder({ orderNo });
//     message.success('操作成功');
//     butLoading.value = false;
//     getList();
//   } catch (error) {
//     butLoading.value = false;
//     console.error('接受订单失败：', error);
//   }
// };

// // 拒绝订单
// const handleRefuse = (orderNo: string) => {
//   cancelLoading.value = true;
//   Modal.confirm({
//     title: '是否确定拒绝该订单？',
//     content: '请优先联系客人说明情况后，再拒绝订单！',
//     okText: '确认拒绝',
//     cancelText: '取消',
//     onOk: async () => {
//       try {
//         await orderReject({
//           orderNo,
//           reason: '已联系客人说明原因，带您带来了不便请谅解',
//         });
//         cancelLoading.value = false;
//         await getList();
//         message.success('操作成功');
//       } catch (error) {
//         cancelLoading.value = false;
//         console.error('入住确认失败：', error);
//       }
//     },
//   });
// };

// 跳转订单列表
const handleOrder = () => {
  router.push({ path: '/order/order-list' });
};

onMounted(() => {
  window.addEventListener('pending-order-update', getList);
  getList();
});

onUnmounted(() => {
  window.removeEventListener('pending-order-update', getList);
});
</script>

<template>
  <div class="card-box w-full px-4 pb-5">
    <div>
      <div class="pt-3">
        <div class="text-lg font-bold">待处理订单</div>
      </div>
      <ul v-if="orderList.length > 0" class="w-full divide-y" role="list">
        <li
          v-for="item in orderList"
          :key="item.orderNo"
          class="relative flex justify-between py-3 text-base"
        >
          <div>
            <p class="text-sm">
              <strong>
                ￥<span class="text-lg">{{ item.payAmount || '-' }}</span>
              </strong>
            </p>
            <p class="mt-3">
              {{ item.roomCount || 0 }}间 <span class="ml-2"></span>
              <span>{{ item.nameZh || '' }}</span>
            </p>
          </div>
          <div>
            <p>{{ item.contactName || '' }}</p>
            <p class="mt-3">
              {{ item.nights || 0 }}晚<span class="ml-2"></span>
              <span>
                {{ dayjs(item.checkInDate).format('YYYY/MM/DD') || '' }} -
                {{ dayjs(item.checkOutDate).format('YYYY/MM/DD') || '' }}
              </span>
            </p>
          </div>
          <div>
            <p>{{ item.orderNo || '' }}</p>
          </div>
          <div class="absolute bottom-3 right-2 flex items-center">
            <!-- <Button
              :loading="cancelLoading"
              type="link"
              @click="handleRefuse(item.orderNo)"
            >
              拒绝
            </Button>
            <Button
              :loading="butLoading"
              class="ml-2"
              type="primary"
              @click="handleAccept(item.orderNo)"
            >
              接受
            </Button> -->
            <Button class="ml-2" type="primary" @click="handleOrder">
              去处理
            </Button>
          </div>
        </li>
      </ul>
      <Button
        v-if="orderList.length > 0"
        class="ml-0 py-2 pl-0"
        type="link"
        @click="goOrderDetail"
      >
        查看全部订单
      </Button>
      <div v-else class="mt-2 flex flex-col items-center justify-center">
        <img :src="`${BASE_ICON_URL}no-data.png`" class="img h-auto" />
        <p class="mt-1 text-gray-500">暂无待处理订单</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.img {
  width: 10rem;
}
</style>
